<template>
    <!-- // .wrapper的样式防止图片未加载高度塌陷 -->
 <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
        <!-- slides -->
        <!-- v-for的时候需要添加:key 指定唯一标识 -->
        <swiper-slide v-for="item in swiperList"  :key = "item.id">
            <img class="swiper-img" :src="item.imgUrl" alt="">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
 </div>
</template>

<script type="text/ecmascript-6">
 export default {
 name:'HomeSwiper',
 data () {
 return {
     swiperOption:{
         "pagination": '.swiper-pagination',
         loop:true
     }
 }
 },
 props: {
     swiperList:Array
 },
 components: {

 },
 computed:{
     showSwiper(){
         return this.swiperList.length
     }
 }
 }
//  .warpper >>> 类名  样式穿透
</script>

<style lang="stylus" scoped>
    .warpper >>> .swiper-pagination-bullet-active
        background :#fff
    .wrapper
        position :relative
        height :0
        overflow :hidden
        width:100%
        padding-top:31.25%
        .swiper-container
            position :absolute
            top:0
            left:0
            width:100%
            height:100%
            .swiper-img
                width :100%
 
</style>
